<template>
  <div class="app-container">
    <div class="filter-container" style="display: flex">
      <el-form ref="editForm" :model="editForm" status-icon label-position="right"
               label-width="100px" style="display: flex">
        <el-form-item label="公司名称" prop="ID" style="width: 400px">
          <el-select v-model="editForm.ID" placeholder="请选择" style="width: 260px">
            <el-option
              v-for="item in bxagentfee"
              :key="item.companyName"
              :label="item.companyName"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择年份" prop="year">
          <el-date-picker
            v-model="editForm.year"
            type="year"
            placeholder="选择年份"
            value-format="yyyy">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="选择月份" prop="month">
          <el-date-picker
            v-model="editForm.month"
            type="month"
            placeholder="选择月份"
            value-format="MM">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="margin-left: 30px">
        <el-button type="primary" @click="drawLine" icon="el-icon-search">查询</el-button>
      </div>
    </div>
    <div ref="chart" class="echart"></div>
  </div>
</template>
<script>
    import {doGet, doPost} from '@/api'
    import {cities} from '@/utils/base'

    export default {
        name: 'correlation',
        filters: { },
        data() {
            return {
                list:[],
                interestList: [],
                bxagentfee: [],
                platfromFeeList: [],
                monthList: [],
                dayList: [],
                dataList: [],
                editForm: {
                    year: undefined,
                    month: undefined,
                    ID: undefined,
                    flag: 1,
                    interest: undefined,
                    platfromFeev: undefined
                },
            }
        },
        created() {
            this.$nextTick(() => {
                this.drawLine()
            });
            doGet('userinfo.html', {}).then(response => {
                this.dataList = response.data
                const data = this.dataList
                this.getBxagentfee(data)
            }).catch(() => {

            })
        },
        methods: {
            getBxagentfee(data) {
                this.editForm1 = {
                    companyType: data.companyType
                }
                doGet('insurance.html?op=getCompanyListByType', this.editForm1 ).then(response => {
                    this.bxagentfee = response.rows
                }).catch(() => {
                    this.bxagentfee = []
                })
            },
            drawLine() {
                const myChart =  this.$echarts.init(this.$refs.chart);
                doGet('statistics.html?op=statisFee', this.editForm).then(response => {
                    this.list = response.data
                    this.interestList = this.list.interestList
                    this.platfromFeeList = this.list.platfromFeeList
                    this.monthList = this.list.monthList
                    this.dayList = this.list.dayList
                    let xaxData;
                    if (this.monthList  != null) {
                        xaxData = this.monthList
                    } else {
                        xaxData = this.dayList
                    }
                    myChart.setOption({
                        title: {
                            text: '查询结果',
                            hideDelay: '300'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['垫资利息','手续费']
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: xaxData
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} 元'
                            }
                        },
                        series: [
                            {
                                name:'垫资利息',
                                type:'line',
                                data: this.interestList
                            },
                            {
                                name:'手续费',
                                type:'line',
                                data: this.platfromFeeList
                            }
                        ]
                    });
                }).catch(response => {
                    this.list = []
                    this.$notify.error({
                        title: '失败',
                        message: response.message
                    })
                })
            },
        },
        /*mounted() {
            this.drawLine();
        }*/
    }
</script>
<style>
  .echart {
    width: 98%;
    height: 700px;
  }
</style>
